<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>玛瑞莎业务系统登陆</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
  <link rel="stylesheet" href="__CSS__/bootstrapValidator.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="__CSS__/font-awesome.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="__CSS__/ionicons.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="__CSS__/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="__CSS__/blue.css">
  <style type="text/css">
    html,body{
      height: auto;
    }
  </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href=""><b>玛瑞莎</b>业务系统</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">系统登陆界面</p>
    <form action="{:url('admin/Login/checklogin')}" method="post" id="form">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="用户名" name="username">
        <span class="glyphicon form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="密码" name="password">
        <span class="glyphicon form-control-feedback"></span>
      </div>
      <div class="row">
        <!--<div class="col-xs-8">-->
          <!--<div class="checkbox icheck">-->
            <!--<label>-->
              <!--<input type="checkbox"> Remember Me-->
            <!--</label>-->
          <!--</div>-->
        <!--</div>-->
        <!-- /.col -->
        <div class="col-lg-offset-4 col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat" id="submit">登陆</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

    <!--<div class="social-auth-links text-center">-->
      <!--<p>- OR -</p>-->
      <!--<a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using-->
        <!--Facebook</a>-->
      <!--<a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign in using-->
        <!--Google+</a>-->
    <!--</div>-->
    <!-- /.social-auth-links -->

    <!--<a href="#">I forgot my password</a><br>-->
    <!--<a href="" class="text-center">Register a new membership</a>-->

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 2.2.3 -->
<script src="__JS__/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="__JS__/bootstrap.min.js"></script>
<script src="__JS__/bootstrapValidator.min.js"></script>
<!-- iCheck -->
<script src="__JS__/icheck.min.js"></script>
<script src="__STATIC__/layer/layer.js"></script>
<script src="__JS__/language/zh_CN.js"></script>
<script>
  $(function () {
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
      $('#form').bootstrapValidator({
          message: 'This value is not valid',
          feedbackIcons: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
              username: {
                  message: '用户名验证失败',
                  validators: {
                      notEmpty: {
                          message: '用户名不能为空'
                      }
                  }
              },
              password: {
                  validators: {
                      notEmpty: {
                          message: '密码不能为空'
                      }
                  }
              }
          }
      });
      $(document).keyup(function(event){
          if(event.keyCode ==13){
              $("#submit").trigger("click");
          }
      });
      $("#form").submit(function(ev){ev.preventDefault();});
      $("#submit").on("click", function(){
          var bootstrapValidator = $("#form").data('bootstrapValidator');
          bootstrapValidator.validate();
          if(bootstrapValidator.isValid()){
              $.ajax({
                  type: "POST",
                  url:  "{:url('checklogin')}",
                  data: $('#form').serialize(),
                  beforeSend:function(){
                      $(this).attr("disabled","false"); //禁止点击
                  },
                  success: function(info){
                      console.log(info);
                      if(info.code==1){
                          layer.msg(info.msg, {icon: 1});
                          setTimeout(function(){
                              location.href=info.url;
                          },1000); //延迟演示
                      }else{
                          if(info.msg == '请绑定微信公众号之后在登陆系统！'){
                              layer.open({
                                  type: 1,
                                  title: false,
                                  area: ['300px', '300px'],
                                  shadeClose: true, //点击遮罩关闭
                                  content: "<div><img src='/static/images/qrcode_for_gh_e8badd248bde_258.jpg'></div><br/>请绑定微信公众号之后在登陆系统！"
                              });
                          }
                          layer.msg(info.msg, {icon: 5});
                          $('#submit').removeAttr("disabled"); //禁止点击
                      }

                  }
              });
          return false;
          }else return;
      });
  });

</script>
</body>
</html>
